<template>
  <div class="app-container">
    <!-- 预约单信息 -->
    <h5 class="titleInfo">
      预约单信息
    </h5>
    <el-form ref="list" :rules="rules" :inline="true" :model="list" label-width="130px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="预约单号">
            <span class="spanToInput">{{ list.orderSn | filterNull }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预约状态">
            <span class="spanToInput">{{ list.orderStatus | orderStatusType }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预约医院">
            <span class="spanToInput">{{ list.hospitalName | filterNull }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预约项目">
            <span class="spanToInput">{{ list.projectName | filterNull }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预约日期">
            <span class="spanToInput">{{ list.orderDate | filterNull }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 客户信息 -->
      <div class="divBar" />
      <h5 class="titleInfo">
        客户信息
      </h5>

      <el-row>
        <el-col :span="12">
          <el-form-item label="客户手机号">
            <span class="spanToInput">{{ list.userPhone | filterNull }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户姓名">
            <span class="spanToInput">{{ list.userName | filterNull }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户年龄" prop="age">
            <el-input v-model="list.age" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户性别" prop="sex">
            <!-- <el-select placeholder="请选择" v-model="form.sex">
                            <el-option label="1" value="1"></el-option>
                            <el-option label="2" value="2"></el-option>
                        </el-select> -->
            <el-select v-model="list.sex" placeholder="请选择">
              <el-option
                v-for="item in sexOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="职业" prop="workplace">
            <el-input v-model="list.workplace" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="推荐人姓名">
            <span class="spanToInput">{{ list.serverName | filterNull }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="推荐人手机号">
            <span class="spanToInput">{{ list.serverPhone | filterNull }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 其他信息 -->
      <div class="divBar" />
      <h5 class="titleInfo">
        其他信息
      </h5>

      <el-row>
        <el-col :span="12">
          <el-form-item label="性格特点">
            <el-input v-model="list.userNature" />
          </el-form-item>
        </el-col>
        <el-col :span="12">

          <el-form-item label="用户关注">

            <el-select
              v-model="list.userConcern"
              multiple
              filterable
              allow-create
              default-first-option
              placeholder="请选择"
            >
              <el-option
                v-for="item in userConcernOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="曾咨询医院">
            <el-input v-model="list.knowHospitals" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="曾做过项目">
            <el-input v-model="list.doneProject" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="经济自主权">
            <el-input v-model="list.autoEconomic" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="经济实力">
            <el-input v-model="list.powerEconomic" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预期消费">
            <el-select v-model="list.expectFree" placeholder="请选择">
              <el-option
                v-for="item in expectFreeOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="铺垫项目">
            <el-input v-model="list.followProject" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="铺垫程度">
            <el-input v-model="list.followLevel" placeholder="只能输入0-100" @blur="blurNum(list.followLevel)" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注">
            <el-input v-model="list.submitRemark" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button style="margin-top:30px;margin-left:130px" type="primary" @click="submitFn('list')">立即提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { findProjectOrderProjectByOrderSn, updateProjectOrderProjectUpdateByOrderSn } from '@/api/subscribeManage'
export default {
  name: 'SubManageEdit',
  filters: {
    filterNull(e) {
      if (!e) {
        return '暂无'
      } else {
        return e
      }
    },
    cardNull(e) {
      return window.helper.cardType(e)
    },
    userFocus(e) {
      return window.helper.userFocus(e)
    },
    orderStatusType(e) {
      return window.helper.orderStatusType(e)
    }
  },
  data() {
    return {
      val: '1',
      userId: '',
      list: {
        age: null,
        sex: null,
        workplace: null,
        userNature: null,
        userConcern: null,
        knowHospitals: null,
        doneProject: null,
        autoEconomic: null,
        powerEconomic: null,
        expectFree: null,
        followProject: null,
        followLevel: null,
        submitRemark: null
      },
      expectFreeOption: [],
      userConcernOptions: [],
      sexOption: [
        {
          value: '1',
          label: '男'
        },
        {
          value: '2',
          label: '女'
        },
        {
          value: '0',
          label: '保密'
        }
      ],
      rules: {
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        workplace: [
          { required: true, message: '请输入职业', trigger: 'blur' }
        ]

      }
    }
  },
  mounted() {
    this.userId = Number(this.$route.query.userId)
    this.getList()
    // 获取预期消费
    this.expectFreeOption = window.helper.expectFreeType('listReturn')
    // 获取用户关注
    this.userConcernOptions = window.helper.userFocus('listReturn')
  },
  methods: {
    // 数字校验
    blurNum(e) {
      const reg = new RegExp('^(\\d|[1-9]\\d|100)$')
      if (!reg.test(e)) {
        this.list.followLevel = '0'
      }
    },
    // 获取列表
    getList() {
      const datas = { id: String(this.$route.query.userId) }
      findProjectOrderProjectByOrderSn(datas).then().then(res => {
        console.log(res)
        if (!res.data.code) {
          this.list = res.data.data
          this.list.sex = String(this.list.sex)
          if (!this.list.userConcern) {
            this.list.userConcern = []
          } else {
            this.list.userConcern = this.list.userConcern.split('#')
          }
        } else {
          this.$message.error(res.data.msg)
        }
      })
        .catch(error => {
          this.$message.error(error)
        })
    },
    // 修改提交
    submitFn(e) {
      if (!this.list.userConcern) {
        this.list.userConcern = ''
      } else {
        this.list.userConcern = this.list.userConcern.join('#')
      }
      const tl = this.list
      for (var n in tl) {
        if (tl.hasOwnProperty(n)) {
          if (tl[n] !== undefined || tl[n] !== null) {
            tl[n] += ''
          }
        }
      }
      console.log(this.list)
      console.log(JSON.stringify(this.list))
      this.$refs[e].validate((valid) => {
        if (valid) {
          const newForm = [
            'orderSn',
            'followProject',
            'followLevel',
            'expectFree',
            'submitRemark',
            'userId',
            'age',
            'sex',
            'workplace',
            'userNature',
            'userConcern',
            'knowHospitals',
            'doneProject',
            'autoEconomic',
            'powerEconomic'
          ]
          const newList = {}
          newForm.forEach(i => {
            newList[i] = this.list[i]
          })
          this.list['projectType'] = 0
          const datas = newList
          // console.log(datas)
          updateProjectOrderProjectUpdateByOrderSn(datas).then(res => {
            console.log(res)
            if (!res.data.code) {
              this.$message({
                showClose: true,
                message: '修改成功',
                type: 'success'
              })
              this.$router.push('/subManageIndex')
            } else {
              if (!this.list.userConcern) {
                this.list.userConcern = []
              } else {
                this.list.userConcern = this.list.userConcern.split('#')
              }
              this.$message({
                showClose: true,
                message: res.data.msg,
                type: 'warning'
              })
            }
          })
            .catch(error => {
              this.$message.error(error)
            })
        } else {
          if (!this.list.userConcern) {
            this.list.userConcern = []
          } else {
            this.list.userConcern = this.list.userConcern.split('#')
          }
          this.$message({
            message: '必填项不能为空',
            type: 'warning'
          })
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
    .app-container{padding: 0px!important}
    .form{margin-left: 268px}
</style>
